<template>
	<div class="wrapper">
		<header>
			<div class="go-back"><i class="fa fa-reply" @click="goback"></i></div>
			<p>订单评论</p>
		</header>
		<div class="CommentInfo" style="margin-top:20vw">
			<div class="star-rating-container">
				<div class="star-rating">
					<span v-for="(star, index) in stars" :key="index" @click="rate(index + 1)" @mouseover="hoverRating = index + 1"
					 @mouseleave="hoverRating = 0" :class="{
		        'star': true,
		        'active': (hoverRating || currentRating) >= index + 1,
		        'inactive': (hoverRating || currentRating) < index + 1
		      }">
						★
					</span>
				</div>
				<div class="rating-text">
					{{ ratingTexts[currentRating - 1] || '综合评价' }}
				</div>
			</div>

			<div class="comment-section">
				<textarea v-model="commentContent" placeholder="请输入您的评价..." rows="4" class="comment-input"></textarea>
			</div>

			<div class="anonymous-section">
				<label class="anonymous-checkbox">
					<input type="checkbox" v-model="isAnonymous" class="checkbox-input">
					<span class="checkmark"></span>
					匿名评价
				</label>
				<span class="anonymous-tip">(选择后您的用户名将不会显示)</span>
			</div>

			<button class="submit-button" :disabled="!canSubmit" @click="submit">
				修改评价
			</button>
		</div>
		<!-- 底部菜单部分 -->
		<Footer></Footer>
	</div>
</template>

<script>
	import Footer from '../components/Footer.vue';

	export default {
		name: 'CommentUpdate',
		data() {
			return {
				user: {},
				orderId: this.$route.query.orderId,
				Comment: {},
				currentRating: 0,
				hoverRating: 0,
				commentContent: '',
				isAnonymous: 0,
				stars: [1, 2, 3, 4, 5],
				ratingTexts: [
					'迟早得凉',
					'较差',
					'一般',
					'推荐',
					'强烈推荐'
				],
			}
		},
		created() {
			this.user = this.$getSessionStorage('user');
			let url = `CommentController/getCommentByOrderId/${this.orderId}`;
			this.$axios.get(url).then((response) => {
					// if (response.data.result != null) {
					// 	this.Comment = response.data.result;
					// 	this.currentRating = this.Comment.rating;
					// 	this.commmentContent = this.Comment.commmentContent;
					// 	this.isAnonymous = this.Comment.isAnonymous;
					// }
					
					if (response.data.result) {
						const commentData = response.data.result;
					
						// 4. 使用$nextTick确保DOM更新
						this.$nextTick(() => {
							this.Comment = commentData;
							this.currentRating = commentData.rating || 0; // 默认值
							this.commentContent = commentData.commentContent || ''; // 默认值
							this.isAnonymous = Boolean(commentData.isAnonymous); // 确保是布尔值
						});
					}
				})
				.catch((error) => {
					console.error(error);
				});
		},
		computed: {
			canSubmit() {
				return this.currentRating > 0 && this.commentContent.trim().length > 0;
			}
		},
		methods: {
			rate(rating) {
				this.currentRating = rating;
				this.$emit('rating-changed', {
					rating: rating,
					text: this.ratingTexts[rating - 1]
				});
			},
			submit() {
				let url =
					`CommentController/updateComment/${this.Comment.commentId}/${this.commentContent}/${this.currentRating}/${this.isAnonymous}`;
				this.$axios.put(url).then((response) => {
						if (response.data.result == 1) {
							this.$router.push({
								path: '/index'
							});
						}
					})
					.catch((error) => {
						console.error(error);
					});
			},
			goback() {
				this.$router.go(-1);
			},
		},
		components: {
			Footer
		},
	}
</script>


<style scoped>
	/****************** 总容器 ******************/
	.wrapper {
		width: 100%;
		height: 100%;
	}

	/****************** header部分 ******************/
	.wrapper header {
		width: 100%;
		height: 12vw;
		background-color: #0097FF;
		color: #fff;
		font-size: 4.8vw;

		position: fixed;
		left: 0;
		top: 0;
		z-index: 1000;

		display: flex;
		/*justify-content: center;*/
		align-items: center;
	}

	.wrapper header .go-back {
		padding: 0 32vw 0 2vw;
	}

	.wrapper .CommentInfo .star-rating-container {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 10px;
	}

	.wrapper .CommentInfo .star-rating-container .star-rating {
		display: flex;
		align-items: center;
		font-size: 0;
	}

	.star {
		font-size: 32px;
		cursor: pointer;
		transition: color 0.2s;
		margin-right: 5px;
	}

	.star.active {
		color: #ffcc00;
		/* 亮色星星 */
	}

	.star.inactive {
		color: #ccc;
		/* 暗色星星 */
	}

	.wrapper .CommentInfo .star-rating-container .rating-text {
		font-size: 16px;
		color: #666;
		min-height: 20px;
		text-align: center;
	}

	.comment-section {
		margin-top: 15vw;
		margin-bottom: 15px;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.comment-input {
		width: 80%;
		padding: 12px;
		border: 1px solid #ddd;
		border-radius: 4px;
		resize: vertical;
		font-size: 14px;
		transition: border-color 0.3s;
	}

	.comment-input:focus {
		outline: none;
		border-color: #ffcc00;
	}

	.submit-button {
		width: 80%;
		margin-left: 9%;
		padding: 12px;
		background-color: #ffcc00;
		color: #333;
		border: none;
		border-radius: 4px;
		font-size: 16px;
		font-weight: bold;
		cursor: pointer;
		transition: background-color 0.3s;
	}

	.submit-button:hover {
		background-color: #e6b800;
	}

	.submit-button:disabled {
		background-color: #ddd;
		color: #999;
		cursor: not-allowed;
	}

	.anonymous-section {
		display: flex;
		align-items: center;
		margin-bottom: 20px;
		margin-left: 10px;
		font-size: 14px;
	}

	.anonymous-checkbox {
		display: flex;
		align-items: center;
		cursor: pointer;
		position: relative;
		padding-left: 25px;
		margin-right: 8px;
	}

	.checkbox-input {
		position: absolute;
		opacity: 0;
		cursor: pointer;
	}

	.checkmark {
		position: absolute;
		top: 0;
		left: 0;
		height: 18px;
		width: 18px;
		background-color: #fff;
		border: 1px solid #ddd;
		border-radius: 25vw;
	}

	.anonymous-checkbox:hover .checkbox-input~.checkmark {
		background-color: #f5f5f5;
	}

	.checkbox-input:checked~.checkmark {
		background-color: #ffcc00;
		border-color: #ffcc00;
	}

	.checkmark:after {
		content: "";
		position: absolute;
		display: none;
	}

	.checkbox-input:checked~.checkmark:after {
		display: block;
	}

	.anonymous-checkbox .checkmark:after {
		left: 6px;
		top: 2px;
		width: 5px;
		height: 10px;
		border: solid white;
		border-width: 0 2px 2px 0;
		transform: rotate(45deg);
	}

	.anonymous-tip {
		color: #999;
		font-size: 12px;
	}
</style>
